<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="common/include :: header('结算单明细列表')" />
</head>
<body class="gray-bg">
<div class="ui-layout-center">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <div class="col-sm-12" >
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-6 control-label">客户姓名：</label>
                            <label class="col-sm-6 control-label">[[${statement.customerName}]]</label>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-6 control-label">联系方式：</label>
                            <label class="col-sm-6 control-label">[[${statement.customerPhone}]]</label>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12" >
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-6 control-label">车牌号码：</label>
                            <label class="col-sm-6 control-label">[[${statement.licensePlate}]]</label>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-6 control-label">汽车类型：</label>
                            <label class="col-sm-6 control-label">[[${statement.carSeries}]]</label>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12" >
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-6 control-label">服务类型：</label>
                            <label class="col-sm-6 control-label" th:text="${@dict.getLabel('si_service_catalog',statement.serviceType)}"></label>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-6 control-label">到店时间：</label>
                            <label class="col-sm-6 control-label" th:text="${#dates.format(statement.actualArrivalTime,'yyyy-MM-dd HH:mm')}"></label>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12" >
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-6 control-label">总消费金额：</label>
                            <label class="col-sm-6 control-label" id="totalAmount">[[${statement.totalAmount}]]</label>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-6 control-label">实付价格：</label>
                            <label class="col-sm-6 control-label" id="actuallyPayMoney">[[${statement.totalAmount-statement.discountAmount}]]</label>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12" >
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-6 control-label">优惠价格：</label>
                            <label class="col-sm-6 control-label"><input type="number" onchange="updateAmount()" th:value="${statement.discountAmount}" id="discountAmount"></label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btn-group-sm" id="MyToolbar" role="group">
                <a id="saveBtn" class="btn btn-success disabled"  onclick="saveOp()">
                    <i class="fa fa-plus"></i> 保存
                </a>
                <a id="payBtn" class="btn btn-warning"  onclick="payOp()">
                    <i class="fa fa-paypal"></i> 支付
                </a>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="statementItemTable"></table>
            </div>
        </div>
    </div>
</div>
<div class="ui-layout-east">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="serviceItemForm">
                    <div class="select-list">
                        <ul>
                            <li>
                                名称：<input type="text" name="name"/>
                            </li>
                            <li>
                                是否套餐：
                                <select name="carPackage" th:with="type=${@dict.getType('si_car_package')}">
                                    <option value="">所有</option>
                                    <option th:each="dict : ${type}" th:text="${dict.label}" th:value="${dict.value}"></option>
                                </select>
                            </li>
                            <li>
                                服务分类：
                                <select name="serviceCatalog" th:with="type=${@dict.getType('si_service_catalog')}">
                                    <option value="">所有</option>
                                    <option th:each="dict : ${type}" th:text="${dict.label}" th:value="${dict.value}"></option>
                                </select>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('serviceItemForm','serviceItemTable')"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="serviceItemTable"></table>
            </div>
        </div>
    </div>
</div>
<th:block th:include="common/include :: footer" />
<th:block th:include="common/include :: layout-latest" />
<script th:inline="javascript">
    $(function(){
        $('body').layout({
            east__size:	'30%',
        });
    })
</script>
<!--服务单项表格配置-->
<script th:inline="javascript">
    $(function(){
        var options = {
            id:'serviceItemTable',
            url: "/business/serviceItem/query?saleStatus=1",					//查询数据的请求地址
            uniqueId:"id",//serviceItem的id
            columns:[
                {
                    field:'id',
                    title:'服务单项ID'
                },
                {
                    field:'name',
                    title:'服务名称'
                },
                {
                    field:'discountPrice',
                    title:'单项折扣价'
                },
                {
                    title:'操作',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-info btn-xs " href="javascript:void(0)" ' +
                            'onclick="addToStatementTable(\'' + row.id + '\')"><i class="fa fa-plus"></i></a> ');
                        return actions.join("");
                    }
                }
            ]
        };
        $.table.init(options)
    })
    function addToStatementTable(id){
        //获取服务单项的表格数据
        var rowData = $("#serviceItemTable").bootstrapTable('getRowByUniqueId',id);
        //根据服务单项id取结算单明细表格中寻找是否存在这条记录
        var statementItemRow = $("#statementItemTable").bootstrapTable('getRowByUniqueId',id);
        if(statementItemRow){
            //表格中存在
            //将值数量+1
            //更新数据
            $('#statementItemTable').bootstrapTable('updateCellByUniqueId', {
                id: id,
                field: 'itemQuantity',
                value: statementItemRow.itemQuantity+1
            })
        }else{
            //表格中不存在
            //追加到结算单明细的表格中
            var data = {
                itemId:rowData.id,
                itemName:rowData.name,
                itemPrice:rowData.discountPrice,
                itemQuantity:1
            };
            $("#statementItemTable").bootstrapTable('append',data);
        }
        updateAmount();
    }
</script>
<!--结算单明细表格配置-->
<script th:inline="javascript">
    $(function() {
        var statementId = [[${statement.id}]];
        var options = {
            id:"statementItemTable",
            url: "/business/statementItem/query?statementId="+statementId,//查询的数据的地址   /system/customer/query
            uniqueId:"itemId",
            toolbar:'MyToolbar',
            columns: [
                {
                    field: 'itemId',
                    title: '服务单项ID',
                },
                {
                    field: 'itemName',
                    title: '服务名称',
                },
                {
                    field: 'itemPrice',
                    title: '服务价格'
                },

                {
                    field: 'itemQuantity',
                    title: '购买数量'
                },

                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="addOp(\'' + row.itemId + '\')"><i class="fa fa-plus"></i></a> ');
                        actions.push('<a class="btn btn-warning btn-xs " href="javascript:void(0)" onclick="minusOp(\'' + row.itemId + '\')"><i class="fa fa-minus"></i></a> ');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });
    function addOp(itemId){
        var statementItemRow = $("#statementItemTable").bootstrapTable('getRowByUniqueId',itemId);
        $('#statementItemTable').bootstrapTable('updateCellByUniqueId', {
            id: itemId,
            field: 'itemQuantity',
            value: statementItemRow.itemQuantity+1
        });
        updateAmount();
    }
    function minusOp(itemId){
        var statementItemRow = $("#statementItemTable").bootstrapTable('getRowByUniqueId',itemId);
        if(statementItemRow.itemQuantity>1){
            $('#statementItemTable').bootstrapTable('updateCellByUniqueId', {
                id: itemId,
                field: 'itemQuantity',
                value: statementItemRow.itemQuantity-1
            })
        }else{
            //删除数据
            $('#statementItemTable').bootstrapTable('removeByUniqueId',itemId);
        }
        updateAmount();
    }
    function updateAmount(){
        //统计表格中所有的金额
        var datas= $('#statementItemTable').bootstrapTable('getData');
        var totalAmount = 0;
        $.each(datas,function(index,ele){
            totalAmount += ele.itemPrice*ele.itemQuantity
        });
        $("#totalAmount").html(totalAmount);
        var discountAmount = $("#discountAmount").val();
        if(totalAmount<=discountAmount){
            //总金额比折扣金额小
            discountAmount = totalAmount;
            $("#discountAmount").val(discountAmount)
        }
        var actuallyPayMoney = totalAmount - discountAmount;
        $("#actuallyPayMoney").html(actuallyPayMoney);
        //点亮保存按钮
        $("#saveBtn").removeClass("disabled");
        //把支付按钮变灰
        $("#payBtn").addClass("disabled");
    }
    function saveOp(){
        $.modal.confirm("是否保存明细",function(){
            var statementId = [[${statement.id}]];
            var datas= $('#statementItemTable').bootstrapTable('getData');
            $.each(datas,function(index,ele){
                ele.statementId = statementId;
            });
            datas.push({
                statementId:statementId,
                itemPrice:$("#discountAmount").val()
            });
            $.ajax({
                url:"/business/statementItem/saveItem",
                type: 'post',
                dataType: 'json',
                contentType:"application/json",
                data: JSON.stringify(datas),
                success:function(result){
                    if (result.code == web_status.SUCCESS) {
                        $.modal.msgSuccess("保存成功");
                        //把保存按钮变灰
                        $("#saveBtn").addClass("disabled");
                        //把支付按钮点亮
                        $("#payBtn").removeClass("disabled");
                        $.table.refresh("statementItemTable");
                    }else{
                        $.modal.msgSuccess(result.msg);
                    }
                }
            });
        })
    }
    function payOp(){
        var statementId = [[${statement.id}]];
        $.modal.confirm("用户是否已经支付了?",function(){
            $.get("/business/statement/pay?statementId="+statementId,function(result){
                if (result.code == web_status.SUCCESS) {
                    $.modal.msgSuccess("支付成功");
                    //把保存按钮变灰
                    $("#saveBtn").addClass("disabled");
                    //把支付按钮变灰
                    $("#payBtn").addClass("disabled");
                }else{
                    $.modal.msgSuccess(result.msg);
                }
            });
        });
    }
</script>


</body>
</html>